<template>
  <div class="gold-shop-wrap">
    <van-nav-bar title="我的代理" left-arrow fixed @click-left="onClickLeft" />
    <div class="level">
      <!-- <div class="profit_core_title"> -->
      <div class="level_title">当前级别</div>
      <div class="level_city" :style="{'color':agentItem.text_color}">
        <div v-if="level!=0">
          {{ agentItem.parent_region_name +agentItem.region_name}}
        </div>
        <div v-else>
          {{ agentItem.agent_name}}
        </div>
      </div>
      <!-- </div> -->
      <img :src="agentItem.background" />
    </div>
    <!-- v-if="agentItem.data_list&&agentItem.data_list.length>0" -->
    <div class="level_data" v-for="item,index in agentItem.data_list" :key="index">
      <div class="level_data_img" v-if="item.title">
        <img src="../../../images/mine/icon_shuju.png" />
        {{ item.title }}
      </div>
      <div class="level_data_text">
        <div v-for="item,index in item.items" :key="index">{{item.left_text}}{{item.right_text}}</div>
      </div>
    </div>
    <!-- <div class="level_data" style="margin-top: 0.2rem;padding-bottom: 0;" v-if="level!=0">
      <div class="level_data_img">
        <img src="../../../images/mine/icon_shuju.png" />
        合伙人管理
      </div>
      <van-field
        v-model="agentItem.partner_quota"
        name="partner_quota"
        label="剩余名额"
        placeholder="请输入剩余名额"
        input-align="right"
        readonly
      />
      <van-field
        v-model="account"
        name="account"
        label="赠送合伙人"
        placeholder="请输入对方手机号"
        input-align="right"
      />
    </div> -->
    <!-- <van-button
    v-if="level!=0"
      round
      block
      type="info"
      :disabled="account==''"
      @click="showPopup = true"
      style="width: 95%;margin: 0.32rem auto;"
      color="linear-gradient(to right, #FF5851, #E9011B)"
      >确认赠送</van-button
    > -->
    <van-popup
      v-model="showPopup"
      round
      closeable
      @click-close-icon="closeClick"
      position="bottom"
      class="balance-pay-popup-wrap"
      :style="{ height: showKeyboard ? '450px' : '250px' }"
    >
      <div class="title">确认支付</div>
      <!-- 交易密码 -->
      <div class="row border-none">
        <span class="desc">请输入支付密码:</span>
      </div>
      <div class="row border-none">
        <van-password-input
          :value="tradePassword"
          :focused="showKeyboard"
          @focus="handleShowKeyboard"
        ></van-password-input>
        <van-number-keyboard
          v-model="tradePassword"
          :show="showKeyboard"
          :maxlength="maxlength"
          :hide-on-click-outside="false"
          @input="onPasswordInput"
          @delete="onPasswordDelete"
          @blur="showKeyboard = false"
        ></van-number-keyboard>
      </div>
    </van-popup>
  </div>
</template>
<script>
import {AGENT_GIVE_AWAY_PARTNER,AGENT_INFO,BIG_AGENT_INFO} from '@/api/mine'
export default {
  data() {
    return {
      num: 2,
      account: "",
      level:this.$route.query.level,
      showPopup: false,
      maxlength: 6,
      showKeyboard: false,
      tradePassword: "",
      completePassword: false,
      agentItem:{},
      partner_quota:"",
    };
  },
  mounted() {
    window.scrollTo(0, 0)
    if(this.$route.query.level==0){
      this.getBigAgentInfo()
    }else{
      this.getAgentInfo()
    }
  },
  methods: {
    getAgentInfo(){
        this.$http.get(AGENT_INFO+this.$route.query.level).then(res=>{
        this.agentItem=res.data
    })
    },
    getBigAgentInfo(){
        this.$http.get(BIG_AGENT_INFO,{params:{id:this.$route.query.level}}).then(res=>{
        this.agentItem=res.data
    })
    },
    onClickLeft() {
      this.$router.back();
    },
    // 确认赠送
    handleShowKeyboard() {
      this.tradePassword = "";
      this.completePassword = false;
      this.showKeyboard = true;
    },
    onPasswordInput(t) {
      (this.tradePassword = (this.tradePassword + t).slice(0, this.maxlength)),
        this.tradePassword.length !== this.maxlength ||
          this.completePassword ||
          ((this.completePassword = !0), this.onSubmit());
    },
    onPasswordDelete() {
      this.tradePassword &&
        ((this.tradePassword = this.tradePassword.slice(
          0,
          this.tradePassword.length - 1
        )),
        (this.completePassword = this.tradePassword.length === this.maxlength));
    },
    closeClick() {
      this.showPopup = false;
      this.tradePassword = "";
      this.completePassword = "";
    },
    onSubmit() {
      if (this.loading) {
        return;
      }
      this.loading = true;
      let params = {
        level: this.level,
        account: this.account,
        pay_password: this.tradePassword,
      };
        this.$http.post(AGENT_GIVE_AWAY_PARTNER, params)
        .then(() => {
            this.loading = false;
            this.showPopup = false;
            this.$toast.success('赠送成功');
            this.account=''
            this.pay_password=''
            this.tradePassword = "";
            this.completePassword = "";
            this.getAgentInfo()
        })
        .catch(() => {
            this.loading = false;
        })
    },
  },
};
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
//   min-height: 100vh;
  min-height: calc(100vh - 46px);

  padding-top: 46px;
  background: #f2f4f5;

  ::v-deep .van-nav-bar .van-icon {
    color: #333333;
  }

  ::v-deep .van-nav-bar__arrow {
    font-size: 20px;
  }
}
.level {
  position: relative;
  width: 95%;
  margin: 0 auto;
  margin-bottom: 0.2rem;
  .level_title {
    width: 1.3rem;
    height: 0.32rem;
    font-size: 0.24rem;
    line-height: 0.52rem;
    text-align: center;
    background: #ffffff;
    border-radius: 0px 100px 100px 0px;
    color: #333;
    // padding-left: 0.2rem;
    position: absolute;
    top: 20%;
  }
  .level_city{
    width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 auto;
    font-size: 0.26rem;
    font-weight: bold;
    line-height: 0.52rem;
    padding-left: 0.2rem;
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
  }
  img {
    width: 100%;
    display: block;
    margin: 0 auto;
  }
}
.level_data {
  width: 95%;
  margin: 0 auto;
  background: #fff;
  padding-bottom: 0.2rem;
  border-radius: 8px;
  margin-bottom: .2rem;
  // margin-top: 0.2rem;
  .level_data_img {
    background: #f5faf6;
    border-radius: 8px 8px 0px 0px;
    // opacity: 0.06;
    padding: 0.2rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 0.28rem;
    // line-height: 0.4rem;
    // text-align: left;
    color: #333333;
    font-style: normal;
    img {
      width: 0.32rem;
      vertical-align: middle;
    }
  }
  .level_data_text {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 0.28rem;
    color: #666666;
    line-height: 0.52rem;
    // text-align: left;
    font-style: normal;
    padding-left: 0.2rem;
    // margin-top: 0.2rem;
    padding-top: .2rem;
  }
}
.level_title {
  width: 95%;
  margin: 0 auto;
  background: #fff;
  padding-bottom: 0.2rem;
  border-radius: 8px;
  margin-top: 0.2rem;
  .level_title_btn {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem;
    .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 0.32rem;
      color: #333333;
      line-height: 0.44rem;
      text-align: left;
      font-style: normal;
    }
    .btn {
      padding: 0.1rem 0.3rem;
      background: linear-gradient(135deg, #ff5851 0%, #e9011b 100%);
      border-radius: 0.28rem;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 0.24rem;
      color: #ffffff;
      line-height: 0.34rem;
      //   text-align: left;
      font-style: normal;
    }
  }
  .level_title_text {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 0.24rem;
    color: #666666;
    line-height: 0.44rem;
    // text-align: left;
    font-style: normal;
    margin-left: 0.2rem;
  }
}
.balance-pay-popup-wrap {
  display: flex;
  -webkit-box-orient: vertical;
  flex-direction: column;
  text-align: center;
  padding: 0.32rem;
  box-sizing: border-box;
  .title {
    color: #1b1b1b;
    font-size: 0.36rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
  }
  .row {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #ebedf0;
    &.border-none {
      border: none;
    }
  }
  .van-password-input {
    width: 100%;
    margin: 0;
  }
}
</style>
